import React,{Component,PropTypes} from 'react';
import {redirect,backward} from 'lib/utils';
import Baselist from 'components/Baselist';
import Crumb from 'components/Crumb'
import API,{} from 'lib/api';

import {Card,Form, Select, Input, Button, Icon } from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;

import './style.less';


class Tag extends Component{
    render(){
        return(
            <div className="cmp-tags">
               <span className="tag">
                   {this.props.children}
                   <Icon className="close-tag" type="close" style={{ fontSize: 10}}
                         onClick={this.props.onClick}
                   />
               </span>
            </div>
        )
    };

};

Tag.propTypes={
    onClick:PropTypes.func
};


class AddSpec extends Component{
    constructor(props){
        super(props);

        this.state={
            adding:false,
            specification:[]
        }
    };


    componentWillMount(){
        /* API.fetch("",{id:id},resp=>{  */
            const genre = [
                {name:"水果",value:"fruits"},
                {name:"零食",value:'snacks'},
                {name:"文具",value:'stationery'},
            ];

            const crumb=[
                {href:"/",title:"商城"},
                {href:"/",title:"商城类型"},
                {href:"/",title:"商城规格"},
                {href:"/",title:"添加规格"}
            ];

            this.setState({
                genre:genre,
                crumb:crumb
            });
        /* })*/
    };



    componentDidMount(){
        if(this.props.routeParams.id){
        /* API.fetch("",{id:id},resp=>{  */
            const initData ={
                name:"测试规格名称",
                genre:"fruits",
            };

            const specification = ["测试数据1","测试数据2"]

            this.setState({specification:specification})
            this.props.form.setFieldsValue(initData);
        /* })*/
        }
    };



    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const {specification} = this.state;  // 规格
                console.log('Received values of form: ', values);
            }
        });
    };



    /* 删除规格标签 */
    handlerDelTag(k) {
        const {specification} = this.state;
        specification.splice(k, 1);
        this.setState({specification:specification})
    };



    /* 添加规格失去焦点 */
    handlerBlur = (e) =>{
        const {value} = e.target;
        let {adding,specification} = this.state;

        if(value.replace(/\s/g, "")){

            specification.push(value);

            let _spec = Array.from(new Set(specification));
            console.log(_spec)
            this.setState({
                adding:!adding,
                specification:_spec
            })
        }else {
            this.setState({ adding:!adding })
        }

    }



    render(){
        const { getFieldDecorator } = this.props.form;
        const {genre, adding, specification} = this.state;
        return(
            <Baselist>
                <Crumb crumb={this.state.crumb}/>
                <Card title="添加规格" noHovering={true} className="add-standard">

                    <Form onSubmit={this.handleSubmit} >
                        <FormItem label="规格名称" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >
                            {getFieldDecorator('name', {
                                rules: [{ required: true, message: '请输入商品名称' }],
                            })(
                                <Input placeholder="请输入商品名称"/>
                            )}
                        </FormItem>


                        <FormItem label="所属商品类型" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >
                            {getFieldDecorator('genre', {
                                rules: [{ required: false, message: '' }],
                            })(
                                <Select onChange={this.handleSelectChange} >
                                    {
                                        genre?
                                            genre.map((v,k)=>(
                                                <Option key={k} value={v.value}>{v.name}</Option>
                                            ))
                                        :null
                                    }

                                </Select>
                            )}
                        </FormItem>

                        {
                            specification.length!=0?
                                <FormItem label="规格项" labelCol={{span:4}} wrapperCol={{span: 8}} >
                                    {getFieldDecorator(' ', {
                                        rules: [{ required: false, message: '请输入商品名称' }],
                                    })(
                                        <div className="standard-list">
                                            {
                                                specification.map((v,k)=>(
                                                    <Tag key={k} onClick={this.handlerDelTag.bind(this,k)}>{v}</Tag>
                                                ))
                                            }
                                        </div>
                                    )}
                                </FormItem>
                                :null
                        }

                        <FormItem label="至少填写一项" labelCol={{span: 4}} wrapperCol={{span: 8}} >
                            {
                                adding?
                                    <div>
                                        <Input type="text" placeholder="请输入规格"
                                               onBlur={this.handlerBlur}
                                               className="input-spec"
                                        />
                                    </div>
                                    :
                                    <div className="add-op"
                                         onClick={_=>{
                                             this.setState({ adding:!this.state.adding });
                                             setTimeout(_=>{
                                                 document.getElementsByClassName("input-spec")[0].focus();
                                             },100)
                                         }}
                                    >
                                        <Icon type="plus" style={{marginRight:5}}/>
                                        添加规格
                                    </div>

                            }

                        </FormItem>

                        <FormItem wrapperCol={{ span: 8, offset: 4 }} >
                            <Button type="primary" htmlType="submit">
                                保存
                            </Button>
                        </FormItem>
                    </Form>
                </Card>
            </Baselist>

        )
    }
};

export default Form.create()(AddSpec);